<template>
	<view class="content">
		<text class="title">领取会员</text>
		<view class="center">
			<scroll-view scroll-y="true">
				<!-- 头部 -->
				<view class="part">
					<!-- 没有领取时 -->
					<view class="part-one" v-if="!registerSuccess">
						<image src="/static/ic_logo.png" style="width: 50rpx; height: 50rpx; margin-left: 15rpx;"></image>
						<view class="part-desc">
							<view class="desc-one">
								<text style="font-size: 20rpx;">Hi 我是</text>
								<image src="/static/xiaomei.png" style="width: 90rpx; height: 22rpx; margin-left: 5rpx;">
								</image>
							</view>
							<text style="margin-top: 6rpx; font-size: 18rpx;">送你90天美业AI店掌会员</text>
						</view>
					</view>
					<!-- 领取成功时 -->
					<view v-if="registerSuccess" class="part-two">
						<image src="/static/icon_success.png" style="width: 90rpx; height: 90rpx;"></image>
						<text style="margin-top: 15rpx; font-size: 26rpx;">恭喜你，领取成功</text>
					</view>
				</view>
				<!-- 中部 -->
				<view class="vip">
					<image class="background-vip" :src="vipPath">
					</image>
					<view class="content-vip">
						<view class="top-one">
							<image src="/static/icon_vip_yes.png" style="width: 30rpx; height: 30rpx; margin-left: 25rpx;">
							</image>
							<text style="font-size: 24rpx; margin-left: 5rpx;">领取会员</text>
						</view>
						<view class="top-two">
							<view style="margin-top: 20rpx;">
								<text style="font-size: 35rpx; margin-left: 25rpx;">美业AI店掌会员</text>
								<text style="font-size: 35rpx; margin-left: 5rpx; color: #372ABF; font-weight: bold;">90天</text>
								<text style="font-size: 35rpx; margin-left: 5rpx;">体验卡</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 下部 -->
				<swiper class="swiper" indicator-color="rgba(225,225,225,0.9)" indicator-active-color="#4124D4"
					:indicator-dots="true" :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item" class="slide-image"></image>
					</swiper-item>
				</swiper>

			</scroll-view>
		</view>
		<view class="bottom" @click="login()">
			<view class="background"></view>
			<text class="text">{{ registerSuccess ? '下载美业AI掌店APP' : '立即领取' }}</text>
		</view>
		<!-- 其他组件 -->
		<LoginModal ref="loginRef" @registerSuccess="handleRegister()"></LoginModal>
	</view>
</template>

<script setup>
	import vipPath from "../../static/vip_card.png";
	import LoginModal from '../../components/user/LoginModal.vue'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from "vue";

	/* 基础数据 */
	//是否注册登录成功 
	const registerSuccess = ref(false);
	const swiperList = ref([
		'../../static/scheme01.png',
		'../../static/scheme02.png',
		'../../static/scheme03.png',
		'../../static/scheme04.png'
	])
	//展示登录页面
	const loginRef = ref(null)

	/* 钩子函数*/
	// 在组件挂载后调用
	onMounted(() => {

	})
	/* 方法 */
	function login() {
		if (registerSuccess.value) {
			uni.showModal({
				title: '提示',
				content: '是否打开外部链接？',
				success: function(res) {
					if (res.confirm) {
						if (process.env.VUE_APP_PLATFORM === 'app') {
							// App环境
							plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=com.ymmyaidz');
						} else {
							// 其他环境，如H5、小程序等，可以导航到H5页面或使用其他方法打开链接
						}
					}
				}
			});
		} else {
			loginRef.value.showModal();
		}
	}

	function handleRegister() {
		registerSuccess.value = true;
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		width: 100vw;
		height: 100vh;

		.title {
			width: 100vw;
			height: 70rpx;
			line-height: 70rpx;
			font-weight: bold;
			font-size: 26rpx;
			text-align: center;
		}

		.center {
			display: flex;
			flex-grow: 1;
			/* 使用 !important 提升优先级，但请谨慎使用 */
			width: 95%;

			.part {
				display: flex;
				flex-direction: column;

				.part-one {
					display: flex;
					align-items: center;
					height: 90rpx;
					border-radius: 10rpx;
					background-color: #F7F8FA;

					.part-desc {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						align-content: space-between;

						.desc-one {
							display: flex;
							flex-direction: row;
							align-items: center;
						}
					}
				}

				.part-two {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			.vip {
				position: relative;
				/* 确保子绝对定位相对于父容器 */
				width: 100%;
				height: 300rpx;

				.background-vip {
					position: absolute;
					top: 0;
					left: 0;
					/* 绝对定位 */
					width: 100%;
					height: 300rpx;
					object-fit: cover;
				}

				.content-vip {
					display: flex;
					flex-direction: column;
					position: relative;
					height: 300rpx;
					/* 相对于父容器定位 */

					.top-one {
						display: flex;
						height: 40%;
						padding-top: 5rpx;
						align-items: center;
					}

					.top-two {
						display: flex;
						height: 60%;
					}
				}
			}

			.swiper {
				height: 750rpx;

				.slide-image {
					width: 100%;
					height: 750rpx;
					background-size: cover;
				}
			}
		}

		.bottom {
			display: flex;
			width: 96%;
			position: relative;
			padding-top: 15rpx;
			padding-bottom: 15rpx;
			justify-content: center;
			align-items: center;

			.background {
				width: 100vw;
				background-image: url('/static/button_receive.png');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				aspect-ratio: 1110 / 155;
				/* 根据你的图片宽高比设置 */
			}

			.text {
				position: absolute;
				top: 50%;
				font-size: 30rpx;
				text-align: center;
				color: #fff;
				transform: translateY(-50%);
			}
		}
	}
</style>